<template>
  <div id="add-lecture">
    <div class="add-lecture-breadcrumb">讲座列表/详情</div>
    <div class="add-lecture">
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>宣讲主题</div>
        <el-input
          :disabled="disabled"
          v-model="form.title"
        > </el-input>
      </div>
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>宣讲模式</div>
        <el-radio
          v-model="form.model"
          :label="0"
        >线下</el-radio>
        <el-radio
          v-model="form.model"
          :label="1"
        >线上</el-radio>
      </div>
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>宣讲时间</div>
        <el-date-picker
          :disabled="disabled"
          v-model="local.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </div>
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>宣讲地址</div>
        <el-input
          :disabled="disabled"
          v-model="form.address"
        > </el-input>
      </div>
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>宣讲人数</div>
        <el-input
          class="short-elinput"
          v-model="form.count"
          :disabled="disabled"
          maxlength="10"
          @blur="provinScore"
        >
        </el-input>
        <span class="short-notice">注：请填写本讲座的受众人数</span>
      </div>
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>主办单位</div>
        <el-input
          :disabled="disabled"
          v-model="form.department"
        > </el-input>
      </div>
      <div>
        <div class="add-lecture-label"><span class="c-red">*</span>宣讲属于</div>
        <el-cascader
          v-model="form.belongs"
          :options="local.teacherOptions"
          :props="props"
          clearable
        ></el-cascader>
      </div>
      <div class="add-lecture-vtop">
        <div class="add-lecture-label"><span class="c-red">*</span>佐证图片</div>
        <div>
          <el-upload
            :disabled="disabled"
            class="upload-demo"
            action="/lec/resource/upload?type=1"
            :on-preview="handelPreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :file-list="local.fileList"
            multiple
            list-type="picture"
            accept=".jpg,.jpeg,.JPG,.JPEG"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >
              只能上传jpg文件，尺寸为200px*200px，且不超过10M
            </div>
          </el-upload>
        </div>
      </div>
      <div class="add-lecture-vtop">
        <div class="add-lecture-label"><span class="c-red">*</span>讲稿文件</div>
        <div>
          <el-upload
            :disabled="disabled"
            class="upload-demo"
            action="/lec/resource/upload?type=2"
            :on-preview="handelPreviewOther"
            :on-success="handleSuccessJGWJ"
            :on-remove="handleRemoveJGWJ"
            :file-list="local.fileListJGWJ"
            :show-file-list="false"
            multiple
            accept=".doc,.docx"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >请上传word讲稿文件</div>
          </el-upload>
          <div class="upload-download">
            <div
              v-for="(item, index) in local.fileListJGWJ"
              :key="index"
            >
              <span>
                <i class="el-icon-document"></i>
                {{ item.name }}
                <i
                  @click="removeFile(local.fileListJGWJ, index)"
                  class="el-icon-close"
                ></i>
              </span>
              <a
                v-if="item.url"
                :href="item.url"
              >下载</a>
            </div>
          </div>
        </div>
      </div>
      <div class="add-lecture-vtop">
        <div class="add-lecture-label">讲师简历</div>
        <div>
          <el-upload
            :disabled="disabled"
            class="upload-demo"
            action="/lec/resource/upload?type=2"
            :on-preview="handelPreviewOther"
            :on-success="handleSuccessJSJL"
            :on-remove="handleRemoveJSJL"
            :file-list="local.fileListJSJL"
            :show-file-list="false"
            multiple
            accept=".doc,.docx"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >请上传word讲师简历</div>
          </el-upload>
          <div class="upload-download">
            <div
              v-for="(item, index) in local.fileListJSJL"
              :key="index"
            >
              <span>
                <i class="el-icon-document"></i>
                {{ item.name }}
                <i
                  @click="removeFile(local.fileListJSJL, index)"
                  class="el-icon-close"
                ></i>
              </span>
              <a
                v-if="item.url"
                :href="item.url"
              >下载</a>
            </div>
          </div>
        </div>
      </div>
      <div class="add-lecture-vtop">
        <div class="add-lecture-label">其他材料</div>
        <div>
          <el-upload
            :disabled="disabled"
            class="upload-demo"
            action="/lec/resource/upload?type=3"
            :on-preview="handelPreviewOther"
            :on-success="handleSuccessQTCL"
            :on-remove="handleRemoveQTCL"
            :file-list="local.fileListQTCL"
            :show-file-list="false"
            multiple
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >请上传其他材料，可以上传压缩包</div>
          </el-upload>
          <div class="upload-download">
            <div
              v-for="(item, index) in local.fileListQTCL"
              :key="index"
            >
              <span>
                <i class="el-icon-document"></i>
                {{ item.name }}
                <i
                  @click="removeFile(local.fileListQTCL, index)"
                  class="el-icon-close"
                ></i>
              </span>
              <a
                v-if="item.url"
                :href="item.url"
              >下载</a>
            </div>
          </div>
        </div>
      </div>

      <div class="add-lecture-vtop">
        <div class="add-lecture-label">宣讲类型</div>
        <el-select
          v-model="form.courseType"
          placeholder="请选择"
        >
          <el-option
            v-for="val in local.xjOptions"
            :key="val.id"
            :value="val.id"
            :label="val.name"
          />
        </el-select>
      </div>
      <div class="add-lecture-vtop">
        <div class="add-lecture-label">备注信息</div>
        <el-input
          :disabled="disabled"
          v-model="form.note"
          type="textarea"
          rows="4"
        ></el-input>
      </div>
    </div>
    <div class="btn-group">
      <div v-if="!disabled">
        <el-button
          v-if="id"
          type="blue"
          @click="addLecture(2)"
        >修改</el-button>
        <el-button
          v-else
          type="blue"
          @click="addLecture(1)"
        >保存</el-button>
      </div>
      <el-button
        type="gray"
        @click="$router.go(-1)"
      >返回</el-button>
      <el-button
        v-if="role !== 2"
        type="green"
        icon="el-icon-check"
        @click="updateStatus(2)"
      >同意</el-button>
      <el-button
        v-if="role !== 2"
        type="orange"
        icon="el-icon-close"
        @click="dialogVisible = true"
      >拒绝</el-button>
      <!-- <el-button
        v-if="role !== 2"
        type="orange"
        icon="el-icon-close"
        @click="updateStatus(3)"
        >拒绝</el-button
      > -->
      <div
        v-if="id"
        class="addlecture-status"
      >
        审核状态：
        <span v-if="form.status === 0"> 未提交 </span>
        <span v-if="form.status === 1"> 未审核 </span>
        <span v-if="form.status === 2"> 已通过 </span>
        <span v-if="form.status === 3"> 被拒绝 </span>
      </div>
    </div>
    <el-image-viewer
      v-if="local.showViewer"
      :url-list="[local.viewerUrl]"
      :on-close="closeViewer"
    />
    <el-dialog
      :close-on-click-modal="false"
      title="填写拒绝原因"
      :visible.sync="dialogVisible"
      width="410px"
      @close="closeDialog"
    >
      <textarea
        v-model="remark"
        class="al-txt"
        cols="30"
        rows="10"
      ></textarea>
      <div class="tc-big-btn">
        <el-button @click="subDialog">确认</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import Casader from "../components/cascaderD";
import elImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: { Casader, elImageViewer },
  data() {
    return {
      props: { multiple: true },
      remark: "",
      dialogVisible: false,
      role: "",
      disabled: false,
      id: "",
      form: {
        title: "",
        startTime: "",
        endTime: "",
        address: "",
        model: 0,
        count: "",
        department: "",
        images: [],
        note: "",
        belongs: [],
        lectureFiles: [],
        vitaes: [],
        materials: [],
        courseType: "",
      },
      local: {
        time: [],
        fileList: [],
        fileListJGWJ: [],
        fileListJSJL: [],
        fileListQTCL: [],
        showViewer: false,
        viewerUrl: "",
        teacherOptions: [],
        xjOptions: [
          {
            id: 1,
            name: "团中央宣讲",
          },
          {
            id: 2,
            name: "省级示范宣讲(团省委主办)",
          },
          {
            id: 3,
            name: "日常宣讲",
          },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.role = getToken() - 0;
      console.log(this.role, 2234);
      //修改回填
      this.id = this.$route.query.id;
      if (this.id) {
        this.getDetails();
        //是否可修改
        let disabled = this.$route.query.disabled;
        if (disabled) {
          this.disabled = true;
        }
      }
      this.getTeacherTypes();
    },
    subDialog() {
      this.$http
        .post(`/course/details/review`, {
          id: this.$route.query.id,
          status: 3,
          remark: this.remark,
        })
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            // this.updateStatus(3);
            this.$router.push({
              path: "LectureList",
            });
            this.dialogVisible = false;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    closeDialog() {
      this.dialogVisible = false;
      this.remark = "";
    },
    removeFile(file, index) {
      file.splice(index, 1);
    },
    //获取讲师类型
    getTeacherTypes() {
      this.$http.get(`/teacher/types`).then((response) => {
        let res = response.data;
        if (res.code == "200") {
          console.log(res, 1666666);
          this.local.teacherOptions = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //限制输入数字
    provinScore() {
      let reg = /^[1-9]\d*$/;
      let isInt = reg.test(this.form.count);
      if (!isInt) {
        this.form.count = 1;
        this.$message.warning("只能输入整数");
      }
    },
    //修改讲座状态
    updateStatus(type) {
      let self = this;
      let ids = [];
      ids.push(self.id);
      self.$http.post(`/course/review?status=${type}`, ids).then((response) => {
        let res = response.data;
        if (res.code == "200") {
          self.$message.success(res.message);
          self.$router.push({
            path: "LectureList",
          });
        } else {
          self.$message.error(res.message);
        }
      });
    },
    closeViewer() {
      this.local.showViewer = false;
    },
    handelPreview(file) {
      console.log(file);
      this.local.viewerUrl = file.url;
      this.local.showViewer = true;
    },
    handleRemove(file, fileList) {
      this.local.fileList = fileList;
      console.log(file, fileList);
    },
    handleSuccess(res, file, fileList) {
      let obj = {
        name: res.data,
      };
      if (res.code == 200) {
        this.$message.success(res.message);
        this.local.fileList = fileList;
      } else {
        this.$message.error(res.message);
        fileList.splice(fileList.length - 1, 1);
      }
      console.log(res, 222222);
      console.log(fileList, 333);
    },
    handelPreviewOther(file) {
      //   let fullUrl = this.form.lectureFiles.find(item=>item.shortUrl === file.name);
      //   console.log(fullUrl);
      //   console.log(file.url);
      window.open(file.url);
    },
    handleRemoveJGWJ(file, fileList) {
      this.local.fileListJGWJ = fileList;
      console.log(file, fileList);
    },
    handleSuccessJGWJ(res, file, fileList) {
      let obj = {
        name: res.data,
      };
      if (res.code == 200) {
        this.$message.success(res.message);
        this.local.fileListJGWJ = fileList;
      } else {
        this.$message.error(res.message);
        fileList.splice(fileList.length - 1, 1);
      }
      console.log(this.local.fileListJGWJ, 222222);
      console.log(fileList, 333);
    },
    handleRemoveJSJL(file, fileList) {
      this.local.fileListJSJL = fileList;
      console.log(file, fileList);
    },
    handleSuccessJSJL(res, file, fileList) {
      let obj = {
        name: res.data,
      };
      if (res.code == 200) {
        this.$message.success(res.message);
        this.local.fileListJSJL = fileList;
      } else {
        this.$message.error(res.message);
        fileList.splice(fileList.length - 1, 1);
      }
      console.log(this.local.fileListJSJL, 222222);
      console.log(fileList, 333);
    },
    handleRemoveQTCL(file, fileList) {
      this.local.fileListQTCL = fileList;
      console.log(file, fileList);
    },
    handleSuccessQTCL(res, file, fileList) {
      let obj = {
        name: res.data,
      };
      this.local.fileListQTCL = fileList;
      console.log(this.local.fileListQTCL, 222222);
      console.log(fileList, 333);
    },
    reLecture() {
      if (!this.local.time.length) {
        this.$message.error("请选择宣传时间");
        return false;
      }
      return true;
    },
    //查询讲座详情回显
    getDetails() {
      let self = this;
      self.$http.get(`/course/info?id=${self.id}`).then((response) => {
        let res = response.data;
        if (res.code == "200") {
          self.form = res.data;
          //时间
          const { startTime, endTime } = res.data;
          self.local.time.push(startTime, endTime);
          //图片
          let fileList = [];
          res.data.images.forEach((item) => {
            fileList.push({
              name: item.shortUrl,
              url: item.fullUrl,
              response: {
                data: item.shortUrl,
              },
            });
          });
          console.log(fileList, 223);
          self.local.fileList = fileList;
          //讲稿文件
          let fileListJGWJ = [];
          res.data.lectureFiles.forEach((item) => {
            fileListJGWJ.push({
              name: item.shortUrl,
              url: item.fullUrl,
              response: {
                data: item.shortUrl,
              },
            });
          });
          console.log(fileListJGWJ, 223);
          self.local.fileListJGWJ = fileListJGWJ;
          //讲师简历
          let fileListJSJL = [];
          res.data.vitaes.forEach((item) => {
            fileListJSJL.push({
              name: item.shortUrl,
              url: item.fullUrl,
              response: {
                data: item.shortUrl,
              },
            });
          });
          console.log(fileListJSJL, 223);
          self.local.fileListJSJL = fileListJSJL;
          //其他材料
          let fileListQTCL = [];
          res.data.materials.forEach((item) => {
            fileListQTCL.push({
              name: item.shortUrl,
              url: item.fullUrl,
              response: {
                data: item.shortUrl,
              },
            });
          });
          console.log(fileListQTCL, 223);
          self.local.fileListQTCL = fileListQTCL;
        } else {
          self.$message.error(res.message);
        }
      });
    },
    //保存/修改
    addLecture(type) {
      let self = this;
      console.log(self.form);
      let isNone = this.reLecture();
      if (!isNone) {
        return;
      }
      let req = "";
      if (type === 1) {
        req = "add";
      }
      if (type === 2) {
        req = "update";
      }
      //图片
      self.form.images = self.local.fileList.map((item) => item.response.data);
      self.form.lectureFiles = self.local.fileListJGWJ.map(
        (item) => item.response.data
      );
      self.form.vitaes = self.local.fileListJSJL.map(
        (item) => item.response.data
      );
      self.form.materials = self.local.fileListQTCL.map(
        (item) => item.response.data
      );

      //时间
      self.form.startTime = self.local.time[0];
      self.form.endTime = self.local.time[1];
      self.$http.post(`/course/${req}`, self.form).then((response) => {
        let res = response.data;
        if (res.code == "200") {
          self.$message.success(res.message);
          self.$router.push({
            path: "LectureList",
          });
        } else {
          self.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss">
#add-lecture {
  .short-elinput {
    width: 200px;
    margin-right: 20px;
  }
  .short-notice {
    color: red;
  }
  .al-txt {
    padding: 14px;
    box-sizing: border-box;
  }
  .tc-big-btn {
    margin-top: 10px;
  }
  .upload-download {
    > div {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #606266;
      line-height: 1.8;
      margin-top: 5px;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;
      padding-left: 4px;
      > span {
        display: flex;
        align-items: center;
      }
      .el-icon-document {
        height: 100%;
        margin-right: 7px;
        color: #909399;
        line-height: inherit;
      }
      .el-icon-close {
        cursor: pointer;
        margin: 0 10px;
        &:hover {
          color: #409eff;
        }
      }
      a {
        color: #409eff;
      }
    }
  }
  .upload-tips {
    font-size: 14px;
    padding: 10px 0;
  }
  .add-lecture-breadcrumb {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #282834;
    margin-bottom: 40px;
  }
  .add-lecture {
    > div {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .add-lecture-label {
        min-width: 80px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2d2d2d;
      }
    }
    .add-lecture-vtop {
      align-items: flex-start;
      .add-lecture-label {
        padding-top: 10px;
      }
    }
  }
  .btn-group {
    display: flex;
    > div {
      &:first-child {
        margin-right: 10px;
      }
    }
  }
  .addlecture-status {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
}
</style>
